<template>
  <div class="box">
    <!--图册操作-->
    <el-form ref="form" label-width="100px" style="width: 98%">
      <el-form-item label="大屏宽度：">
        {{panelDom.width}}
      </el-form-item>
      <el-form-item label="大屏高度：">
        {{panelDom.height}}
      </el-form-item>

      <el-form-item label="背景色：">
        <avue-input-color v-model="panelDom.backgroundColor"></avue-input-color>
      </el-form-item>
      <el-form-item label="背景图片：">
        <img :src="panelDom.backgroundImg" @click="showImg=true" width="100%" height="150px" alt="">
      </el-form-item>
    </el-form>


    <el-dialog
      title="选择背景图"
      :visible.sync="showImg"
      width="50%">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in imgList" :key="index">
          <img :src="item" width="100%" height="150px" alt="" @click="selectImg(item)" style="margin-top: 20px;">
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "index",
        computed: {
            //当前选中的值
            panelDom() {
                return this.$store.state.panelDom
            },
        },
        data(){
            return{

                //背景图选择弹框表示
                showImg:false,
                //默认图片集合
                imgList:[
                    require("@/assets/img/bg1.png"),
                    require("@/assets/img/bg2.png"),
                    require("@/assets/img/bg3.png"),
                    require("@/assets/img/bg4.jpg"),
                    require("@/assets/img/bg5.jpg"),
                    require("@/assets/img/bg6.jpg"),
                    require("@/assets/img/bg7.jpg"),
                    require("@/assets/img/bg8.jpg"),
                    require("@/assets/img/bg9.jpg"),
                    require("@/assets/img/bg10.jpg"),
                ]
            }
        },
        methods:{
            selectImg(item){
                this.panelDom.backgroundImg=item;
                this.showImg=false
            }
        }
    }
</script>

<style scoped lang="less">
  .box {
    width: 100%;
    flex: 1;
    color: white;

    /deep/ .el-form-item__label {
      color: white;
    }
  }
</style>
